<template>
    <view class="page-view">
        <Loading ref="loading" :custom="false" :shadeClick="false" :type="2" @callback="callback()"></Loading>
        <userHander></userHander>
        <homePage v-if="pageNo == -1" @setPage="setPage"></homePage>
        <gamesPage v-else :pageNo="pageNo"></gamesPage>
        <u-tabbar v-model="current" :list="pageList" bg-color="#1d1c22" height="116rpx" @change="tabbarChange"></u-tabbar>
        <record :showModel="showRecord"></record>
    </view>
</template>

<script>
    import Loading from '@/components/loading/loading.vue'
    import userHander from './components/userheader.vue'
    import record from './record.vue'
    import homePage from './homePage.vue'
    import gamesPage from './gamesPage.vue'
    export default {
        components: {
            Loading,
            record,
            userHander,
            homePage,
            gamesPage
        },
        data() {
            return {
                pageNo: -1,
                pageList: [
					{
					    iconPath: "home",
					    selectedIconPath: "home-fill",
					    text: '首页',
					    customIcon: false,
					},
                    
                    {
                        iconPath: "file-text",
                        selectedIconPath: "file-text-fill",
                        text: '记录',
                        customIcon: false,
                    },
                    {
                        iconPath: "play-circle",
                        selectedIconPath: "play-circle-fill",
                        text: '客服',
                        customIcon: false,
                    },
					{
					    iconPath: "account",
					    selectedIconPath: "account-fill",
					    text: '我的',
					    customIcon: false,
					},
                ],
                current: 5,
                showRecord: false
            };
        },
        onLoad(option) {
			this.initAudio()
            if(option.pageNo){
                this.pageNo = option.pageNo
            }else{
                this.pageNo = -1
            }
        },
		onShow() {
			this.initAudio()
		},
        methods: {
            // 组件跳转
            setPage(pageNo) {
                this.pageNo = pageNo
            },
            // 加载组件的相关事件
            close: function() {
                this.$refs.loading.close();
            },
            open: function() {
                this.$refs.loading.open();
            },
            callback() {
                console.log("关闭后回掉");
            },
            // 底部tabbar切换
            tabbarChange(index){
                if(index == 3){
                    uni.navigateTo({
                        url: '/pages/user/user'
                    })
                }else if(index == 0){
					uni.navigateTo({
					    url: '/pages/index/index'
					})
                }else if(index == 1){
					url: '/pages/index/index'
                    this.showRecord = true
                }else if(index == 2) {
					uni.navigateTo({
					    url: '/pages/service/service'
					})
				}
            },
			initAudio() {
				this.$innerAudioContext.src = ''
			},
        }
    }
</script>

<style lang="scss">
    .page-view {
        width: 100%;
        height: 100%;
        position: relative;
    }
	.page-view::before {
	    width: 100%;
	    height: 100%;
		content: " ";
		top: 0;
	    position: absolute;
	    background: url(../../static/img/login/background.png) no-repeat;
		background-position: 50% -228rpx;
		opacity: 0.2;
	    // background-size: 100% 100%;
	}
</style>
